<script setup lang="ts">
import { getMedicines } from '@/services/medicine'
import { onShow } from '@dcloudio/uni-app'
import type { Medicine, MedicineItem } from '@/types/medicine'
import { ref } from 'vue'

const medicines = ref<MedicineItem[]>([])

onShow(() => {
  list()
})

async function list() {
  const medicinePage = await getMedicines()
  medicines.value = medicinePage.records
}

function addMedicine() {
  // 打开新增页面
  uni.navigateTo({
    url: './form'
  })
}

function handleItemClick(id: number) {
  uni.navigateTo({
    url: './detail?id=' + id
  })
}
</script>

<template>
  <view class="container">
    <view class="goods-list">
      <view v-for="medicine in medicines" :key="medicine.id" @click="handleItemClick(medicine.id)">
        <view class="goods-item">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image :src="medicine.cover" class="goods-pic"></image>
          </view>
          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{medicine.medicineName}}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">￥{{medicine.price}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--<view style="height: 80px; color: #dedede">没有更多数据</view>-->
    <button @click="addMedicine" type="primary">添加药品</button>
  </view>
</template>

<style lang="scss">
.container {
  button {
    line-height: 2;
    font-size: 16px;
    background-color: #00e676;
    position: fixed;
    bottom: 5px;
    left: 20px;
    right: 10px;
    border-radius: 20px;
  }
}

.goods-item {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  display: flex;
  padding: 10px 5px;
  // border-bottom: 1px solid #f0f0f0;

  .goods-item-left {
    margin-right: 15px;

    .goods-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .goods-item-right {
    margin-right: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 13px;
    }

    .goods-info-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .goods-price {
      font-size: 16px;
      color: #c00000;
    }

    .icon-tianxie {
      font-size: 25px;
      color: #c00000;
    }
  }
}
</style>

